<template>
    <view class="container">
        <view class="header">
             <text class="title">我的课程</text>
        </view>
        
        <view class="course-tree" v-if="myClass.length > 0">
            <view class="category-item" v-for="(category, index) in myClass" :key="index">
                <view class="category-header" @click="toggleCategory(index)">
                    <text class="category-name">{{ category.categoryName }}</text>
                    <text class="arrow-icon">{{ category.expanded ? '▼' : '▶' }}</text>
                </view>
                
                <view class="chapter-list" v-show="category.expanded">
                    <view class="chapter-item" v-for="(chapter, chapterIndex) in category.courseChapterVO" :key="chapterIndex">
                        <view class="chapter-header" @click="toggleChapter(index, chapterIndex)">
                            <text class="chapter-name">{{ chapter.chapterName }}</text>
                            <text class="arrow-icon">{{ chapter.expanded ? '▼' : '▶' }}</text>
                        </view>
                        
                        <view class="course-list" v-show="chapter.expanded">
                            <view class="course-item" v-for="(course, courseIndex) in chapter.coursesVO" :key="courseIndex" @click="playVideo(course)">
                                <view class="course-content">
                                    <text class="course-title">{{ course.courseName }}</text>
                                    <text class="video-title">{{ course.videoVO?.title || '无视频标题' }}</text>
                                    <text class="course-desc">{{ course.description }}</text>
                                </view>
                                <text class="play-icon">▶</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        
        <view class="empty-state" v-else>
            <text>暂无课程数据</text>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { onMounted, reactive } from 'vue';
import { useUserStore } from '@/stores/api.js';

const userStore = useUserStore();

const myClass = reactive([]);

// 页面加载完成后执行
onMounted(() => {
  console.log('我的课程页面已加载');
  findMyClass();
});

const findMyClass = () => {
  uni.request({
    url: 'http://127.0.0.1:8088/course/myCourse',
    method: 'GET',
    data: { userId: userStore.getUserId },
    success: (res) => {
      if (res.data.code == 200) {
        const processedData = res.data.data.map(category => ({
          ...category,
          expanded: false,
          courseChapterVO: category.courseChapterVO.map(chapter => ({
            ...chapter,
            expanded: false,
          }))
        }));
        
        myClass.splice(0, myClass.length, ...processedData);
      } else {
        uni.showToast({
          title: '获取课程失败',
          icon: 'none'
        });
      }
    },
    fail: (err) => {
      console.error('课程获取失败:', err);
      uni.showToast({
        title: '网络请求失败',
        icon: 'none'
      });
    }
  });
};

// 切换分类展开/折叠状态
const toggleCategory = (index) => {
  myClass[index].expanded = !myClass[index].expanded;
};

// 切换章节展开/折叠状态
const toggleChapter = (categoryIndex, chapterIndex) => {
  const chapter = myClass[categoryIndex].courseChapterVO[chapterIndex];
  chapter.expanded = !chapter.expanded;
};

// 播放视频
const playVideo = (course) => {
  if (course.videoVO && course.videoVO.link) {
    uni.navigateTo({
     // url: `/pages/videoPlayer/index?videoUrl=${encodeURIComponent(course.videoVO.link)}&title=${encodeURIComponent(course.courseName)}`
	   url: "/pages/clazz/index?courseId="+course.courseId+"&courseName="+course.courseName+"&description="+course.description
	 // url: "/pages/clazz/index?courseId=${encodeURIComponent(course.courseId)}&courseName=${encodeURIComponent(course.courseName)}&description=${encodeURIComponent(course.videoVO.description)}"
    });
  } else {
    uni.showToast({
      title: '视频链接不存在',
      icon: 'none'
    });
  }
};
</script>

<style>
.container {
  padding: 20rpx;
  background-color: #f8f8f8;
  min-height: 100vh;
}

.header {
  padding: 20rpx 0;
  text-align: center;
}

.header h1 {
  font-size: 36rpx;
  color: #333;
}

.course-tree {
  background-color: #fff;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

/* 分类节点样式 */
.category-item {
  margin-bottom: 15rpx;
}

.category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 25rpx 30rpx;
  background-color: #e8f4ff;
  cursor: pointer;
  border-radius: 8rpx;
}

.category-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #0066cc;
}

.arrow-icon {
  font-size: 28rpx;
  color: #666;
}

/* 章节节点样式 */
.chapter-list {
  padding: 10rpx 0;
}

.chapter-item {
  margin: 15rpx 20rpx;
}

.chapter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22rpx 30rpx;
  background-color: #f5f9ff;
  cursor: pointer;
  border-radius: 8rpx;
}

.chapter-name {
  font-size: 28rpx;
  color: #007aff;
  font-weight: 500;
}

/* 课程节点样式 */
.course-list {
  padding: 5rpx 0;
  margin-left: 20rpx;
}

.course-item {
  display: flex;
  align-items: center;
  padding: 30rpx 30rpx;
  margin: 15rpx 0;
  background-color: #fefefe;
  border-radius: 8rpx;
  border: 1rpx solid #eee;
  cursor: pointer;
  position: relative;
  box-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.05);
}

.course-content {
  width: 85%;
}

.course-title {
  font-size: 28rpx;
  color: #333;
  font-weight: 600;
  display: block;
  margin-bottom: 10rpx;
}

.video-title {
  font-size: 24rpx;
  color: #007aff;
  display: block;
  margin-bottom: 12rpx;
  font-style: italic;
}

.course-desc {
  font-size: 24rpx;
  color: #666;
  line-height: 1.4;
  display: block;
}

.play-icon {
  position: absolute;
  right: 30rpx;
  top: 50%;
  transform: translateY(-50%);
  font-size: 28rpx;
  color: #007aff;
  background-color: rgba(0, 122, 255, 0.1);
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  text-align: center;
  line-height: 40rpx;
}

.empty-state {
  padding: 60rpx 0;
  text-align: center;
}

.empty-state text {
  font-size: 28rpx;
  color: #999;
}
</style>
    